<template>
    <div class="AttendanceManagement">
        <pageTitle :title="title"/>
        <!-- 线条 -->
        <div class="line"></div>

        <div class="SearchAdd">
            <el-input
                v-model="input"
                style="width: 240px"
                placeholder="請輸入關鍵字"
                :suffix-icon="Search"
                @change="search"
            />
            <button class="Add" @click="ToAdd"> + 新增班次</button>
        </div>
       
        <div class="Table">
            <el-table :data="tableData" style="width: 100%" >
                <el-table-column label="班次名称" prop="NAME" width="300" />
                <el-table-column label="班次类型" prop="many" width="300" />
                <el-table-column label="考勤時間" prop="aa" width="300" />
                <el-table-column label="出勤時間" prop="time" width="300" />
                <el-table-column label="最后更新时间" prop="people" width="300" />
                <el-table-column label="操作人" prop="people" width="300" />


                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default>
                        <el-button link type="primary" @click="edit">編輯</el-button>
                        <el-button link type="primary" @click="del">刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        
        <div class="pagination-section">
            <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import pageTitle from "@/components/pageTitle/pageTitle.vue";
const title = '班次管理';
import { Search } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router'
const router = useRouter()

//搜索事件
const search = () =>{
    console.log(input.value);
    
}

//新增考勤組事件
const ToAdd = () =>{
    console.log('新增');
    router.push('./classesAdd')
}

const tableData = ref([
    {
        NAME:'李超',
        many:'無敵',
        aa:'今天好',
        time:'今天',
        people:'李超'
    },
    {
        NAME:'李超',
        many:'無敵',
        aa:'今天好',
        time:'今天',
        people:'李超'
    },
    {
        NAME:'李超',
        many:'無敵',
        aa:'今天好',
        time:'今天',
        people:'李超'
    },
    {
        NAME:'李超',
        many:'無敵',
        aa:'今天好',
        time:'今天',
        people:'李超'
    },
    {
        NAME:'李超',
        many:'無敵',
        aa:'今天好',
        time:'今天',
        people:'李超'
    },
    {
        NAME:'李超',
        many:'無敵',
        aa:'今天好',
        time:'今天',
        people:'李超'
    },
    {
        NAME:'李超',
        many:'無敵',
        aa:'今天好',
        time:'今天',
        people:'李超'
    },

])

//編輯按鈕
const edit = () =>{
    console.log(111);
    
}

//刪除按鈕
const del = () =>{
    console.log(222);
    
}

//输入框值
const input = ref('')

const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 2
})

onMounted(() => {
    
})
</script>

<style lang="less" scoped>
.AttendanceManagement {
    padding: 20px;
    background-color: #fff;

    .line{
        width: 100%;
        height: 2px;
        background-color: grey;
        margin-top: 20px;
    };
    
    .SearchAdd{
        width: 100%;
        height: 60px;
        margin-top: 30px;

        .Add{
            width: 100px;
            height: 30px;
            background-color: rgb(137, 167, 201);
            border-radius: 5px;
            border: none;
            color: #fff;
            text-align: center;
            line-height: 10px;
            margin-left: 80.375rem;
            margin-top: -10px;
            cursor: pointer;
        }
    }

    :deep(.el-table .el-table__header) {
    background-color: #1a75ff; /* 表头背景颜色 */
    border-bottom: 1px solid #1a75ff; /* 表头与内容之间的边框 */
    }
    
    .pagination-section {
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
    }
}
</style>